<template>
  <div class="recommendActionSheet">
    <van-action-sheet v-model="show" title="感谢你的推荐!">
      <div class="main">
        <div class="des flex flex-around">
          <div class="grade textAlignCenter">
            <p>78</p>
            <van-rate size=".4rem" color="#FECF00"
                      v-model="value" readonly gutter=".05rem" :allow-half=allowHalf
                      icon="like" void-icon="like-o" />
          </div>
          <div class="text ">
            <p class="text1">宝贝推荐度</p>
            <p class="text2">由用户推荐·平台推荐综合得出</p>
          </div>
        </div>
        <div class="des2 flex flex-between">
          <p class="p1">你2小时前已推荐</p>
          <p class="p2">取消推荐</p>
        </div>
      </div>
      <div class="textAlignCenter">
        <button @click="onButtonClick">完成</button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue';
import {ActionSheet} from 'vant';
import { Rate } from 'vant';

Vue.use(Rate);
Vue.use(ActionSheet);
export default {
  name: "recommendActionSheet",
  data() {
    return {
      show: false,
      value:78*5/100,
      allowHalf:true
    }
  },
  methods:{
    onButtonClick(){
      this.show=false;
    }
  }
}
</script>

<style lang="less" scoped>
.van-action-sheet{
}
.van-action-sheet__header {
  padding-top: .5rem;
  font-weight: 550;
  background: url("../../../assets/img/goodsMore/recommend_bg.png") no-repeat;
  background-size: contain;
}
.main{
  padding: 0 .5rem;
  .des{
    background-color: #fff;
    width: 9rem;
    height: 3rem;
    border-radius: .2rem;
    background: url("../../../assets/img/goodsMore/recommend_bg2.png") no-repeat;
    background-size: contain;
    .grade{
      padding: .6rem 0;
      width: 2rem;
      p{
        color: #66380A;
        font-weight: 550;
        font-size: .8rem;
      }
    }
    .text{
      padding: .7rem 0;
      width: 6rem;
      .text1{
        font-size: .5rem;
        font-weight: 550;
      }
      .text2{
        font-size: .4rem;
        color: #666666;
        margin-top: .2rem;
      }
    }
  }
  .des2{
    margin: .5rem 0 3rem 0;
    background-color: #fff;
    padding: .4rem .4rem;
    border-radius: .4rem;
    font-size: .4rem;
    .p1{
      color: #999999;
    }
    .p2{
      color: #cccccc;
    }
  }
}

button {
  font-size: .4rem;
  color: #fff;
  padding: .2rem 4rem;
  background: linear-gradient(to right,#FF7F00,#FF5200);
  border: none;
  border-radius: 1rem;
  margin-bottom: .2rem;
}
.van-popup{
  background-color: #F8F8F8;
}
</style>